<template>
    <div style="display: flex;justify-content: center">
        <el-card class="box-card">
            <el-form :model="data.editform" label-width="120px" >



                <el-upload
                        class="avatar-uploader"
                        action="http://124.221.133.96:9090/file/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                >
                    <img v-if="data.editform.avatarUrl" :src="data.editform.avatarUrl" class="avatar" />

                       <el-icon v-if="!data.editform.avatarUrl" class="avatar-uploader-icon"><Plus /></el-icon>
                        <el-button type="primary" plain style="margin-top: 180px;margin-left: -110px" >上传头像</el-button>
                </el-upload>



                <el-form-item style="margin-top: -20px" label="用户名:">
                    <el-input v-model="data.editform.username" style="width: 90%"></el-input>
                </el-form-item>
                <el-form-item label="密码:">
                    <el-input v-model="data.editform.password" style="width: 90%"></el-input>
                </el-form-item>
                <el-form-item label="昵称:">
                    <el-input v-model="data.editform.nickName" style="width: 90%"></el-input>
                </el-form-item>
                <el-form-item label="年龄:">
                    <el-input v-model="data.editform.age" style="width: 90%"></el-input>
                </el-form-item>
                <el-form-item label="性别:">
                    <el-input v-model="data.editform.sex" style="width: 90%"></el-input>
                </el-form-item>
                <el-form-item label="电话:">
                    <el-input v-model="data.editform.phone" style="width: 90%"></el-input>
                </el-form-item>
                <el-form-item label="地址:">
                    <el-input type="textarea" v-model="data.editform.address" style="width: 90%"></el-input>
                </el-form-item>
            </el-form>
            <el-button type="primary" style="float: right;" plain  @click="confirmEdit">确认修改</el-button>
        </el-card>
    </div>
</template>

<script setup>
    import request from '../utils/request'
    import {ref, reactive, onMounted,watch ,defineExpose,defineEmits} from 'vue'

    import { ElMessage } from 'element-plus'

    import { Plus } from '@element-plus/icons-vue'



    const data = reactive(
        {
            editform: {},
            user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) :{}
        }
    )
    onMounted(() => {
        selectUserInfo()
        console.log("data.editform.avatarUrl====>",data.editform.avatarUrl)
    })
    const selectUserInfo = () => {
         request.get("/user/getOneByUsername/"+data.user.username).then(res => {
            if(res.code == 200){
                data.editform = res.data
            }
        })
    }
    let emit = defineEmits(['ziPageMsg'])

    const handleAvatarSuccess = (res) => {
        data.editform.avatarUrl = res
        ElMessage({
            showClose: true,
            message: '上传成功',
            type: 'success',
        })
    }
    const confirmEdit = () => {

        request.put('/user/updateById',data.editform)
            .then((res) => {
                // console.log(res)
                if (res.code === 200) {
                    localStorage.setItem("user",JSON.stringify(res.data))
                    emit('ziPageMsg',data.editform)


                    ElMessage({
                        showClose: true,
                        message: '修改成功',
                        type: 'success',
                    })
                }else {
                    ElMessage({
                        showClose: true,
                        message: '服务器维护中',
                        type: 'error',
                    })
                }
            })
    }

</script>

<style scoped>
.box-card{
    width: 700px;
    margin-top: 10px;
    height: 650px;
}
.avatar-uploader {
    display: block;
    text-align: center;
    height: 240px;
    padding-bottom: 10px;
}
.avatar-uploader-icon {
    display: block;
    font-size: 28px;
    color: #359d0d;
    width: 138px;
    height: 138px;
    line-height: 138px;
    text-align: center;
    border: 1px dashed #ccc;
}
.avatar {
    width: 138px;
    height: 138px;
    border: 1px solid orange;
}
</style>